<template>
    <el-container style="height: 100%;">
      <!-- 侧边栏 -->
      <el-aside width="250px" class="sidebar">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/residents">居民信息</el-menu-item>
          <el-menu-item index="/houses">房屋信息</el-menu-item>
          <el-menu-item index="/properties">物业管理</el-menu-item>
          <el-menu-item index="/complaints">投诉建议</el-menu-item>
          <el-menu-item index="/activities">社区活动</el-menu-item>
          <el-menu-item index="/system">系统管理</el-menu-item>
        </el-menu>
      </el-aside>
  
      <!-- 主体内容区域 -->
      <el-main>
        <el-row class="content" justify="center" style="margin-top: 20px;">
          <el-col :span="18">
            <el-card>
              <div class="header">
                <h3>居民信息管理</h3>
                <el-button type="primary" @click="openAddDialog">添加居民</el-button>
              </div>
  
              <el-table :data="residents" stripe>
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="name" label="姓名" width="150"></el-table-column>
                <el-table-column prop="gender" label="性别" width="100"></el-table-column>
                <el-table-column prop="age" label="年龄" width="100"></el-table-column>
                <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button type="text" @click="openEditDialog(scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteResident(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
  
              <!-- 添加居民弹窗 -->
              <el-dialog title="添加居民" :visible.sync="addDialogVisible">
                <el-form :model="newResident" ref="addForm">
                  <el-form-item label="姓名" :label-width="'80px'">
                    <el-input v-model="newResident.name" placeholder="请输入居民姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" :label-width="'80px'">
                    <el-radio-group v-model="newResident.gender">
                      <el-radio label="男">男</el-radio>
                      <el-radio label="女">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="年龄" :label-width="'80px'">
                    <el-input v-model="newResident.age" placeholder="请输入居民年龄" type="number"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话" :label-width="'80px'">
                    <el-input v-model="newResident.phone" placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                </el-form>
  
                <div slot="footer" class="dialog-footer">
                  <el-button @click="addDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitNewResident">确认</el-button>
                </div>
              </el-dialog>
  
              <!-- 编辑居民弹窗 -->
              <el-dialog title="编辑居民" :visible.sync="editDialogVisible">
                <el-form :model="currentResident" ref="editForm">
                  <el-form-item label="姓名" :label-width="'80px'">
                    <el-input v-model="currentResident.name" placeholder="请输入居民姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" :label-width="'80px'">
                    <el-radio-group v-model="currentResident.gender">
                      <el-radio label="男">男</el-radio>
                      <el-radio label="女">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="年龄" :label-width="'80px'">
                    <el-input v-model="currentResident.age" placeholder="请输入居民年龄" type="number"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话" :label-width="'80px'">
                    <el-input v-model="currentResident.phone" placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                </el-form>
  
                <div slot="footer" class="dialog-footer">
                  <el-button @click="editDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitEditResident">确认</el-button>
                </div>
              </el-dialog>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ElContainer, ElAside, ElMenu, ElMenuItem, ElMain, ElRow, ElCol, ElButton, ElCard, ElTable, ElTableColumn, ElDialog, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio } from 'element-plus';
  import { getAllResidents, submitResident, updateResident, deleteResident as del } from '@/utils/axios';
  
  const activeMenu = ref('/residents');
  const residents = ref([]);
  const addDialogVisible = ref(false);
  const editDialogVisible = ref(false);
  const newResident = ref({
    name: '',
    gender: '男',
    age: null,
    phone: ''
  });
  const currentResident = ref({
    id: null,
    name: '',
    gender: '男',
    age: null,
    phone: ''
  });
  
  // 获取居民信息
  const loadResidents = async () => {
    const response = await getAllResidents();
    residents.value = response;
  };
  
  // 打开添加居民弹窗
  const openAddDialog = () => {
    newResident.value = {
      name: '',
      gender: '男',
      age: null,
      phone: ''
    };
    addDialogVisible.value = true;
  };
  
  // 打开编辑居民弹窗
  const openEditDialog = (resident) => {
    currentResident.value = { ...resident };
    editDialogVisible.value = true;
  };
  
  // 提交新增居民信息
  const submitNewResident = async () => {
    await submitResident(newResident.value);
    addDialogVisible.value = false;
    loadResidents();
  };
  
  // 提交编辑居民信息
  const submitEditResident = async () => {
    await updateResident(currentResident.value.id, currentResident.value);
    editDialogVisible.value = false;
    loadResidents();
  };
  
  // 删除居民信息
  const deleteResident = async (id) => {
    await del(id);
    loadResidents();
  };
  
  onMounted(() => {
    loadResidents();
  });
  </script>
  
  <style scoped>
  .content {
    padding: 20px;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .el-button {
    margin-left: 10px;
  }
  
  .el-dialog {
    width: 400px;
  }
  
  .el-form-item {
    margin-bottom: 15px;
  }
  </style>
  